<template>
  <div>
    <el-dialog
      title="评论列表"
      @close="closeDialog"
      @open="getCommentList"
      :visible.sync="showCommentListDialogVisible"
    >
      <div class="commentList" v-if="commentList.length">
        <CommentCard
          class="comment"
          v-for="comment in commentList"
          :key="comment.id"
          :comment="comment"
        />
        <div class="pagination-content">
          <el-pagination
            small
            style="margin:0 auto"
            background
            :current-page="page"
            @current-change="pageChange"
            :page-size="limit"
            layout="prev, pager, next"
            :total="count"
          >
          </el-pagination>
        </div>
      </div>
      <div v-else>
        <el-empty description="暂无更多评论"></el-empty>
      </div>
      <div slot="footer">
        <el-input
          v-model="comment_content"
          show-word-limit
          maxlength="1000"
          @keyup.enter.native="publishComment"
          :disabled="!publishFlag"
          placeholder="评论千万条,文明第一条"
        >
          <el-link
            slot="suffix"
            :underline="false"
            @click="publishComment"
            class="el-input__icon el-icon-s-promotion"
          ></el-link>
        </el-input>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommentCard from '@/components/Comment/CommentCard'
import { defineAsyncComponent } from 'vue'

export default {
  // 数据传递
  props: {
    ShowDialogVisible: {
      type: Boolean,
      required: true
    },
    currentDocumentId: {
      type: Number,
      required: true
    }
  },
  components: {
    CommentCard: defineAsyncComponent(() =>
      import('@/components/Comment/CommentCard')
    )
  },
  data() {
    return {
      showCommentListDialogVisible: false,
      comment_content: '', // 评论内容
      limit: 8,
      page: 1,
      count: null,
      publishFlag: true,
      commentList: []
    }
  },
  computed: {},
  watch: {
    // 动态获得prop
    ShowDialogVisible: {
      immediate: true,
      handler(val, oldval) {
        this.showCommentListDialogVisible = val
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 获取评论列表
      this.getCommentList()
    })
  },
  methods: {
    closeDialog() {
      this.showCommentListDialogVisible = false
      this.commentList = []
      this.$emit('dialogClosed')
    },
    // 获取当前文档的评论
    async getCommentList() {
      const { currentDocumentId, limit, page } = this
      const res = await this.$API.document.getCommentList(
        currentDocumentId,
        limit,
        page
      )
      if (res.status == 200) {
        this.commentList = res.data.payload
        this.count = res.data.count
      }
    },
    // 发布文档评论
    // 发起评论
    async publishComment() {
      let { currentDocumentId, comment_content } = this
      let datas = this.$qs.stringify({
        document_id: currentDocumentId,
        comment_content
      })
      this.publishFlag = false
      const res = await this.$API.document.addComment(datas)
      if (res.status == 200) {
        this.$message.success('发送评论成功')
        // 刷新评论列表
        this.comment_content = ''
        // 重新获得评论列表
        this.getCommentList()
      }
      this.publishFlag = true
    },
    // 页数变化
    pageChange(page) {
      // console.log(page)
      this.page = page
      this.getCommentList()
    }
  }
}
</script>

<style scoped>
.comment {
  margin: 20px 0;
}
.pagination-content {
  width: 100%;
  display: flex;
  justify-self: center;
}
</style>
